<!--
 * @Description: roductLIST
 * @Date: 2024-02-27 21:54:41
 * @LastEditTime: 2024-02-27 21:54:50
 * @FilePath: /pure-admin-thin/src/views/product/list.vue
-->

<script setup lang="ts">
import { ProductInfo } from "@/api/product";
import { useProductStoreHook } from "@/store/modules/product";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import dayjs from 'dayjs'
const router = useRouter();

const tableData = ref([]);

const handleEdit = (product: ProductInfo) => {
  console.log(product);
  router.push("/product/detail?id=" + product.id);
};

const reloadData = () => {
  useProductStoreHook()
    .getProductList()
    .then(res => {
      if (res.code === 200) {
        tableData.value = res.data;
      }
    });
};
onMounted(() => {
  reloadData();
});
const handleDel = item => {
  useProductStoreHook()
    .delProductInfo(item.id)
    .then(res => {
      if (res.code === 200) {
        reloadData();
      }
    });
};

const handleAdd = () => {
  router.push("/product/detail?id=" + "");
};

defineOptions({
  name: "ProductList"
});
</script>

<template>
  <div>
    <el-card>
      <el-button type="primary" @click="handleAdd">创建商品</el-button>
    </el-card>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="商品名称" width="180" />
      <el-table-column prop="desc" label="商品描述" />
      <el-table-column prop="updatedAt" label="添加时间">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{
              dayjs(scope.row.updatedAt).format("YYYY-MM-dd HH:mm")
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="140">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button link type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
